<template>
  <XFileExplorerLite
    :root-folder-id="rootNode.id"
    :upload-params="bizInfo"
    selection-column
    show-tree
    :show-breadcrumb="false"
    disabled
    :buttons="[]"
    :fetch-api="fetchApi"
    :add-api="createDir"
    :tree-fetch-api="fetchDir"
    :delete-api="deleteFile"
    :update-api="renameFile" />
</template>

<script>
  import { deleteFile, getDirectories, getFiles, newDirectory, renameFile } from '@/api/file'
  import { mapState } from 'vuex'

  export default {
    name: 'VideoList',
    computed: {
      ...mapState('user', {
        userId: state => state.sysUser.userId
      }),
      bizInfo() {
        return { bizId: 2, bizName: '视频中心' }
      },
      rootNode() {
        return { bizId: 2, name: '全部文件' }
      }
    },
    created() {
      document.title = '视频中心'
    },
    methods: {
      fetchApi(folderId, page, text) {
        return getFiles({
          current: page.page,
          size: page.limit,
          descs: ['createdAt'],
          ascs: ['type'],
          example: { ...this.bizInfo, 'parent.id': folderId, filename: text || null }
        })
      },
      async createDir(data) {
        if (data.parentId < 0) {
          delete data.parentId
        }
        return newDirectory({ ...this.bizInfo, directoryId: data.parentId, name: data.folderName })
      },
      deleteFile(ids) {
        return deleteFile(ids)
      },
      renameFile(fileId, file) {
        return renameFile(fileId, file)
      },
      async fetchDir(folderId) {
        const res = await getDirectories({ descs: ['createdAt'], example: { ...this.bizInfo, 'parent.id': folderId } })
        res.data.data.forEach(value => {
          value.name = value.filename
        })
        return res
      }
    }
  }
</script>
